<template>
  <el-container class="outer-wrapper">
    <el-row  class="out-row">
      <el-col :span="8">
        <div class="grid-content bg-purple search-box">
          <p>全局检索-LIMIT</p>
          <hr class="search-box-splitline">
          <!--表单部分-->
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="检索类型">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="项目信息" name="type"></el-checkbox>
                <el-checkbox label="奖项信息" name="type"></el-checkbox>
                <el-checkbox label="论文信息" name="type"></el-checkbox>
                <el-checkbox label="专利专著" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="匹配字段"></el-form-item>
            <el-form-item label="项目名称">
              <el-input v-model="form.itemname" placeholder="请输入要检索的项目关键字,可选"></el-input>
            </el-form-item>
            <el-form-item label="论文主题">
              <el-input v-model="form.itemtheme" placeholder="请输入要检索的论文关键字,可选"></el-input>
            </el-form-item>
            <el-form-item label="奖项相关">
              <el-input v-model="form.awards" placeholder="请输入要检索的奖项关键字,可选"></el-input>
            </el-form-item>
            <el-form-item label="专利专著">
              <el-input v-model="form.patents" placeholder="请输入要检索的专利专著关键字,可选"></el-input>
            </el-form-item>
            <el-form-item label="参与人员">
              <el-input v-model="form.joiners" placeholder="请输入要检索的参与人关键字,可选"></el-input>
              <span class="partners-tips-info">目前仅支持输入单个人员</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即检索</el-button>
              <el-button @click="reset">条件重置</el-button>
            </el-form-item>
            <p class="global-search-tips-info">若未指定任何信息,则默认执行全局检索.</p>
          </el-form>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple-light global-search-box-result">
          <p>检索结果-LIST<el-tag class="search-result-tag" @click="exportAsExcel">导出为excel</el-tag></p>
          <hr class="search-box-splitline">
          <!--表格内容-->
          <el-table
              :data="tableData"
              border
              id="out_table"
              style="width: 100%">
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60">
            </el-table-column>
            <el-table-column
                label="项目名称"
                align="center"
                prop="itemname"
                width="250">
            </el-table-column>
            <el-table-column
                label="参与人"
                align="center"
                prop="joiners"
                width="250"
                :formatter="formatJoiners">
            </el-table-column>
            <el-table-column
                label="日期信息"
                align="center"
                prop="date"
                width="120">
            </el-table-column>
<!--            <el-table-column-->
<!--                align="center"-->
<!--                v-for="item in tableColumns"-->
<!--                :key="item.prop"-->
<!--                :prop="item.prop"-->
<!--                :label="item.label"-->
<!--                :width="item.width">-->
<!--            </el-table-column>-->

            <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="150">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">导出文件</el-button>
              </template>
            </el-table-column>
          </el-table>
          <hr class="global-search-box-result-split"/>
          <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageHelper.currentPage"
                :page-sizes="pageHelper.pageSizes"
                :page-size="pageHelper.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageHelper.totalCount">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import * as File_Server from '@/service/upload/uploadService'
import * as UUID_Util from '@/service/utils/UUIDUtil'
import * as FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import fileDownload from "js-file-download";
import * as UUIDUtil from "@/service/utils/UUIDUtil";
import * as GlobalService from '@/service/index/GlobalService'
export default {
  name: "GlobalSearch",
  data(){
    return {
      form: {
        //检索字段信息
        type: [],//检索类型
        itemname:'',//项目名称
        itemtheme:'',//论文主题
        awards:'',//奖项相关
        patents:'',//专利专著
        joiners:'',//参与人员
      },
      tableColumns:[],
      tableData: [],
      pageHelper:{
        totalCount:20,//总条数
        pageSizes:[ 10, 15, 20],//分页控制
        pageSize:10,//默认页大小
        currentPage:1,//默认当前页数
        totalPage:1,//总页数
      }
    }
  },
  mounted() {
    //初始化分页信息
    this.pageHelper.pageSize=10;
    this.pageHelper.currentPage=1;
    this.pageHelper.totalCount=0;
    this.pageHelper.totalPage=1;
// this.tableColumns=tableColumnForGlobalSearch.itemColumns;
    // this.tableData=[
      // {
      //   name: '上海',
      //   joiners: '王小虎',
      //   date: '2016-05-02',
      // }, {
      //   name: '上海',
      //   joiners: '王小虎',
      //   date: '2016-05-02',
      // }, {
      //   name: '上海',
      //   joiners: '王小虎',
      //   date: '2016-05-02',
      // }, {
      //   name: '上海',
      //   joiners: '王小虎',
      //   date: '2016-05-02',
      // }
    // ]
  },
  methods: {
    /**
     * 格式化表格列-参与人
     * @param row
     * @param column
     * @param cellValue
     * @param index
     */
    formatJoiners(row, column, cellValue, index){
      // console.log(row)
      // console.log(column)
      // console.log(cellValue)
      // console.log(index)
      if (row.joiners)
        return row.joiners.join(" ; ");
      else
        return row.joiners;
    },
    /**
     * 条件重置
     */
    reset(){
      this.form.type=[];
      this.form.itemname='';
      this.form.itemtheme='';
      this.form.awards='';
      this.form.patents='';
      this.form.joiners='';
    },
    /**
     * 提交检索动作
     */
    onSubmit() {
      console.log('submit!');
      console.log(this.form)
      this.executeSearch({
        type: this.form.type+",",
        itemname:this.form.itemname,
        itemtheme: this.form.itemtheme,
        awards: this.form.awards,
        patents: this.form.patents,
        joiners: this.form.joiners,
      });
    },
    /**
     * 执行检索
     */
    executeSearch(searchParams){
      console.log("执行检索")
      this.$message.info("正在执行全局检索操作...")
      GlobalService.globalSearch(searchParams).then(res=>{
        console.log(res)
        //结果解析
        if (res.data&&res.data.status==1){
          //先清空表数据
          this.tableData=[]
          //获取数据
          this.tableData=res.data.data;
          //设置分页信息
          this.pageHelper.currentPage=res.data.currentPage;
          this.pageHelper.pageSize=res.data.pageSize;
          this.pageHelper.totalCount=res.data.totalCount;
          this.pageHelper.totalPage=res.data.totalPage;
          this.$message.success("数据已加载!")
        }else{
          this.$message.error("检索失败,请稍后再试!")
        }
      }).catch(()=>{
        this.$message.error("未知异常,请稍后再试!")
      })
    },
    /**
     * 切换页大小
     * @param val
     */
    handleSizeChange(val) {
      //修改页大小
      this.pageHelper.pageSize=val;
      console.log(`每页 ${this.pageHelper.pageSize} 条`);
      //重新发起数据请求
      this.executeSearch({
        type: this.form.type+",",
        itemname:this.form.itemname,
        itemtheme: this.form.itemtheme,
        awards: this.form.awards,
        patents: this.form.patents,
        joiners: this.form.joiners,
        pagesize: this.pageHelper.pageSize,
        currentpage: this.pageHelper.currentPage,
      });
    },
    /**
     * 切换当前页
     * @param val
     */
    handleCurrentChange(val) {
      //修改当前页数
      this.pageHelper.currentPage=val;
      console.log(`当前页: ${this.pageHelper.currentPage}`);
      //重新发起数据请求
      this.executeSearch({
        type: this.form.type+",",
        itemname:this.form.itemname,
        itemtheme: this.form.itemtheme,
        awards: this.form.awards,
        patents: this.form.patents,
        joiners: this.form.joiners,
        pagesize: this.pageHelper.pageSize,
        currentpage: this.pageHelper.currentPage,
      });
    },
    /**
     * 处理点击事件-导出多个文件为zip压缩包
     * @param row
     */
    handleClick(row) {
      console.log(row);
      //获取用户信息
      let email=localStorage.getItem("email");
      //获取urls信息
      let urls=row.evidences;//数组
      File_Server.downloadMultipFileAsZip(email,urls).then(res=>{
        console.log(res)
        if(res.data&&res.data.size!=0)
          fileDownload(res.data,row.itemname?row.itemname+".zip":UUIDUtil.uuid()+".zip");
        else
          this.$message.error("无可下载文件");
      }).catch(()=>{
        this.$message.error("导出失败")
      })
    },
    /**
     * 导出数据为excel
     */
    exportAsExcel(){
      console.log("exportAsExcel")
      //根据tbaleData生成工作簿对象
      // let domObj = document.getElementById("out_table");
      let domObj_fix_right=document.querySelector("#out_table .el-table__fixed-right");
      let wb;
      if(domObj_fix_right){
          wb = XLSX.utils.table_to_book(document.getElementById("out_table").removeChild(domObj_fix_right), {raw: true});
          document.getElementById("out_table").appendChild(domObj_fix_right);
      }else{
        wb=XLSX.utils.table_to_book(document.getElementById("out_table"));
      }
      console.log(wb)
      //获取二进制字节流作为输出
      let wbout=XLSX.write(wb,{
        bookType:"xlsx",
        bookSST:true,
        type:'array',
      })
      try {
        FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout],{type:'application/octet-stream'}),
            //设置导出文件的名称
            UUID_Util.uuid()+".xlsx"
        )
      }catch (e){
        if (typeof  console != "undefined") console.log(e,wbout)
      }
      return wbout;
    },
  }
}
</script>

<style scoped>
.outer-wrapper{
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.out-row{
  width: 100%;
}
/*搜索框*/
.search-box{
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.search-box:hover{
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 50%);
}
.search-box p{
  font-size: 20px;
  font-weight: 700;
}
.search-box .search-box-splitline{
  margin: 10px 0px 15px 0px;
  color: skyblue;
}
.search-box .global-search-tips-info{
  font-weight: 400;
  font-size: 16px;
  color: #67C23A;
}
/*全局检索结果*/
.global-search-box-result{
  margin-left: 15px;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.global-search-box-result:hover{
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 50%);
}
.global-search-box-result p{
  font-size: 20px;
  font-weight: 700;
}
.global-search-box-result p .search-result-tag{
  float: right;
  cursor: pointer;
}
.global-search-box-result .search-box-splitline{
  margin: 10px 0px 15px 0px;
  color: skyblue;
}
.global-search-box-result-split{
  margin: 10px 0px 10px 0px;
  color: #eae3e3;
}
.partners-tips-info{
  display: block;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: #007bff;
}
</style>